<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/swiper-4.3.5.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/pages/notice/list.css" />
	</head>

	<body style="background-color: #fff;">
		<div class="loading-warpper" id="loading">
			<div class="loading">
				<div class="item1"></div>
				<div class="item2"></div>
			</div>
		</div>
		<header class="mui-bar mui-bar-nav">
			<!-- <div id="header"></div> -->
			<div class="header">
				<a class="mui-action-back mui-icon mui-icon mui-icon-arrowleft"></a>
				<h1 class="mui-title" id="title" style="opacity: 0;">小区公告</h1>
			</div>
		</header>
		<div id="mescroll" class="mescroll">
			<div class="content">
				<!-- <div id="content"></div> -->
				<div class="header-title">小区公告</div>
				<!-- <div class="swiper">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in list"  @click="commentTap(item)">
							<img class="swiper-img" :src="item.path" />
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div> -->
				<div class="list">
					<div class="item" v-for="item in shujiList" @click="commentTap(item)">
						<div class="left">
							<img class="icon" src="../../../images/home/notice/yuan.png">
							<div class="desc">
								<div class="title font-14 font-14" v-text="item.pnTitle"></div>
								<div class="info font-12 font-c-7f">
									<span v-text="item.neiName"></span>
									<span>发布于{{item.pnCD | timeago}}</span>
								</div>
							</div>
						</div>
						<div class="right">
							<img :imgurl="item.path" src="../../../images/jiazai.gif" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var mescroll;
			var title = document.getElementById('title');
			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				// Util.StatusbarHeight('header');
				// Util.StatusbarHeight('content');
				mescroll = new MeScroll("mescroll", {
					down: {
						auto: false,
						callback: downCallback
					},
					up: {
						callback: upCallback,
						page: {
							num: 0,
							size: 10
						},
						lazyLoad: {
							use: true,
							attr: 'imgurl',
							showClass: 'mescroll-lazy-in',
							delay: 500,
							offset: 200
						},
						htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
						onScroll: function(mescroll, y, isUp) {
							var height = 30
							if (y > height) {
								var opacity = y / 140
								opacity = opacity > 1 ? 1 : opacity
								title.style.opacity = opacity
							} else {
								title.style.opacity = 0
							}
						}
					}
				})
			})

			var mySwiper
			var app = new Vue({
				el: "#mescroll",
				data: {
					list: [],
					shujiList: []
				},
				filters: {
					timeago: function(value) {
						return Util.timeago(value)
					}
				},
				methods: {
					commentTap: function(item) {
						mui.openWindow({
							url: 'details.html',
							id: 'details.html',
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: "新闻详情", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									titleSize: "17px", // 字体大小,默认17px
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true
								}
							},
							extras: {
								pnID: item.pnID,
							},
							waiting: {
								autoShow: false
							}
						})
					}
				},
			})



			function downCallback() {
				app.shujiList = []
				mescroll.resetUpScroll();
			}

			function upCallback(page) {
				mui.post(Util.HTTP + 'api/Home/GetProprietorNotice', {
					neiID: Util.getState('hosing').neiID,
					pnType: 2,
					page: page.num,
					number: page.size
				}, function(res) {
					if (res.code == 1001) {
						mescroll.endSuccess(res.data.length);
						app.shujiList = app.shujiList.concat(res.data)
						document.getElementById('loading').style.display = 'none'
					} else {
						mui.toast(res.message)
					}
				})
			}
		</script>
	</body>

</html>
